<template>
    <div class="person">
        <h2>{{ sum }}</h2>
        <button @click="addSum">sum++</button>
    </div>
</template>

<script setup lang="ts" name="Persona">
/* 
    vue 3 的生命周期
*/
import { ref } from 'vue'
import { onBeforeMount, onMounted } from 'vue'      // 挂载的生命周期函数
import { onBeforeUpdate, onUpdated } from 'vue'     // 更新
import { onBeforeUnmount, onUnmounted } from 'vue'  // 卸载（对应 vue 2 的销毁）

let sum = ref(5)
function addSum(){ 
    sum.value ++    // ref 别忘了 .value
}

// 创建 beforeCreate created 在 vue 3 中就是 setup 函数中做的事，所以直接写在这里
// 不区分创建前和创建后了
console.log('创建')

// 挂载 mount
// 1. 挂载前 onBeforeMount
onBeforeMount(() => {
    console.log('挂载前 onBeforeMount')
    // debugger
})

onMounted(() => {
    console.log('挂载完毕 onMounted')
})

</script>

<style scoped>
.person {
    background-color: #afcfb7;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    margin: 10px 0;
}

button {
    margin-right: 5px;
}

hr {
    border-width: 3px;
    border-color: black;
    border-style: solid;
}
</style>
